@import './variable.scss';

::v-deep .warn-dialog {
  width: 60%;
  height: 70%;
  background-color: #1a4969;
  opacity: 0.97;
  
  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }
  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(126)});
    
    .query-form {
      height: px(40);
      line-height: px(32);
      margin-left: px(20);
      
      .el-form-item {
        &__label,&__content {
          color: #fff;
          height: px(32);
          line-height: px(32);
          font-size: px(14);
        }
        .el-input__inner {
          border-radius: px(5);
          width: px(200);
          height: px(32);
          line-height: px(32);
          font-size: px(14);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
        }
      }

      
    }
    .el-table {
      font-size: px(14);
      width: 100%;
      cursor: default;
      background-color: #1a4969;
      .cell{
        line-height: px(20);
        padding: 0;
      }
      td {
        border-bottom: 1px solid #2e67a8;
      }
      tr:hover > td {
        background-color: #2f6b8d;
      }
      .table-herder-custom {
        background-color: #2e67a8;
        color: #fff;
      }
      .table-cell-custom {
        background-color: #1a4969;
        color: #fff;
        .el-link {
          color: #fff;
          margin-left: px(20);
          span {
            font-size: px(10);
          }
          &:hover {
            color: #06f7bb;
          }
        }
      }

      .el-table__body tr.current-row > td {
        background: #3083bb !important;
      }

      thead.has-gutter {
        th.gutter {
          display: none !important;
          width: 0 !important;
        }
      }
      table {
        width: 100% !important;
      }

      .el-table__body-wrapper::-webkit-scrollbar {
        width: px(6); // 横向滚动条
        height: px(6); // 纵向滚动条 必写
      }
      // 滚动条的滑块
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #1f5980;
        border-radius: px(3);
      }
    }
    .el-pagination {
      height: px(32);
      button, span:not([class*=suffix]) {
        height: px(28);
        line-height: px(28);
        font-size: px(12);
        min-width: px(35.5);
        color: #fff;
      }

      .el-select .el-input{
        width: px(100);
        margin: 0 px(5);
      }

     
      .el-input__inner {
        height: px(28);
        line-height: px(28);
        font-size: px(12);
        color: #fff;
        background-color: #1f5980;
        border: 1px solid rgba(#fff, 0.5);
      }
      .el-input__suffix{
        .el-input__icon{
          height: px(28);
          line-height: px(28);
        }
      }

      .btn-prev .el-icon{
        font-size: px(12);
      }
      
      button {
        background-color: #1f5980;
      }
      .el-pager li.active {
        background-color: #248fd6;
      }
      .el-pager li {
        height: px(28);
        line-height: px(28);
        font-size: px(12);
        color: #fff;
        background-color: #1f5980;
      }
      .el-pager .more::before{
        line-height: px(30);
      }
    }
  }
  .el-dialog__footer {
    padding: 0 px(30) px(10);
  }

  .el-button {
    background-color: #1a4969;
    color: #fff;
    height: px(32);
    width: px(70);
    font-size: px(14);
    border-radius: px(5);
    padding: 0;
    &:hover {
      background-color: #409eff;
    }
  }
}